<template>
	<view class="">
		<cu-custom :bgcolor="'#fff'" />
		<view class="scroll-row-item px-3" v-for="(item, index) in  tabarList" :key="index"
			style="height: 80rpx; line-height: 80rpx;" :class="tabarIndex === index ? 'main-text-color':''"
			@click="onTabar(index)" :id="'tab'+ index">
			<text class="font-md">{{item}}</text>
		</view>
		<swiper :duration="150" :current="tabarIndex" :style="'height:'+scorllHeight+ 'px;'" @change="onChange">
			<swiper-item v-for="(item, index) in newItemList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scorllHeight+ 'px;'">
					<view class="p-2" v-if="index == 1">
						<text class="main-text-color">上传图片请参考</text>
						<image :src="`${getApp.globalData.baseImgUrl}/image/51@2x.png`" mode="" style="width: 710rpx; height: 300rpx;">
						</image>
						<text class="main-text-color font-sm">图片要求大小2MB, 图片尺寸 375 * 150</text>
						<button class="main-bg-color text-white font-md mb-2" @click="chooseImageEven">上传图片</button>
					</view>
					<view class="" v-if="item.list.length>0">
						<view class="pl-2 pr-2" v-for="(items, indexs) in item.list">
							<image :src="items" mode="" style="width: 100%; height: 220rpx;" :class="activeIndex === indexs ? 'active':''" @click="handlerImg(items,indexs)"></image>						
						</view>
					</view>
					<view class="text-center mt-5" v-else>
						暂无图库数据
					</view>
					
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="button-box p-2">
			<button class="main-bg-color text-white font-md" @click="saveImage">保存</button>
		</view>
	</view>
</template>

<script>
	import title from "@/components/common/title.vue"
	import validate from "@/utils/validate.js"
	import util from "@/utils/util.js"
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			title,
			cuCustom
		},
		data() {
			return {
				active: 1,
				scorllHeight: 500,
				imageValue: [],
				tabarList: ["平台图库", "我的图库"],
				tabarIndex: 0,
				count: 9,
				array: [],
				newItemList: [{
						name: "平台图库",
						list: []

					},
					{
						name: "我的图库",
						list: []
					}
				],
				uploadUrl: "",
				activeIndex:"",
				imgId:"",
				activeImg:"",
				getApp:""
			}
		},
		onLoad(e) {
			if (e && e.id) {
				this.imgId = e.id
			}
			uni.getSystemInfo({
				success: (res => {
					this.scorllHeight = res.windowHeight - uni.upx2px(400)
				})
			})
			this.getTuKu()
			this.getApp = getApp()
		},
		onShow() {
		},
		methods: {
			// tabar 点击事件
			onTabar(index) {
				if (this.tabarIndex === index) {
					return
				}
				this.tabarIndex = index
				this.activeIndex = ""
				this.activeImg = ""
			},
			// 监听滑块事件
			onChange(e) {
				this.onTabar(e.detail.current)
			},
			// 获取图库信息
			getTuKu(){
				let _that = this
				let params = {
					"supplier_id": uni.getStorageSync("supplier_id")
				}
				interceptor.get("/supplier_applet_api.php?act=getTuKu", params).then((res) => {
					const { info } = res
					if(info.length > 0){
						info.map((item) => {
							// 平台图库
							if(item.supplier_id == 0){
								_that.newItemList[0].list.push(item.img)
							}else{
								// 商家图库
								_that.newItemList[1].list.push(item.img)
							}
						})
					}
				})
				
			},
			
			// 选择图片
			chooseImageEven() {
				var that = this;
				var pics = [];
				var detailPics = that.array;
				if (detailPics.length >= that.count) {
					uni.showToast({
						title: '最多选择' + that.count + '张！',
					})
					return;
				}
				uni.chooseImage({
					count: that.count, // 最多可以选择的图片张数，默认9
					sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function(res) {
						if (validate.handleBeforeUpload(res.tempFiles[0])) {
							var imgs = res.tempFilePaths;
							for (var i = 0; i < imgs.length; i++) {
								pics.push(imgs[i])
							}
							that.uploadimg({
								url: that.uploadUrl, //这里是你图片上传的接口
								path: pics, //这里是选取的图片的地址数组
							});
						}
						
					},
				})

			},
			uploadimg(data) {
				var that = this,
					i = data.i ? data.i : 0,
					success = data.success ? data.success : 0,
					fail = data.fail ? data.fail : 0;
				uni.showLoading({
					title: '上传中...',
					mask: true,
				})
				uni.uploadFile({
					url: getApp().globalData.baseUrl + `/supplier_applet_api.php?act=fileUploadsSupplier`,
					filePath: data.path[i],
					name: 'file',
					formData: {
						"supplier_id": uni.getStorageSync("supplier_id")
					},
					success: (resp) => {
						uni.hideLoading();
						success++;
						that.getTuKu()
					},
					fail: (res) => {
						console.log(res)
						fail++;
						console.log('fail:' + i + "fail:" + fail);
					},
					complete: () => {
						i++;
						if (i == data.path.length) { //当图片传完时，停止调用     
							console.log('执行完毕');
							console.log('成功：' + success + " 失败：" + fail);
							console.log(that.array)
						} else { //若图片还没有传完，则继续调用函数
							data.i = i;
							data.success = success;
							data.fail = fail;
							that.uploadimg(data); //递归，回调自己
						}
					}
				});
			},
			handlerImg(url,index){
				this.activeIndex = index
				this.activeImg = url
			},
			saveImage(){
				interceptor.get('/supplier_applet_api.php?act=confirmBanner', {
					id: this.imgId,
					img: this.activeImg
				}).then((res) => {
					if (res.status === 1) {
						uni.showToast({
							title: res.msg,
							icon:"none",
							success() {
								uni.navigateBack()
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
			

		}
	}
</script>

<style lang="scss" scoped>
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.button-box {
		// position: absolute;
		// bottom: 0;
		background: #F8F8F8;
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
	}

	.radio {
		display: flex;
		flex-direction: row;
		align-items: center;

		checkbox {
			border-radius: 15rpx;
			/* 可以根据需要调整圆角的大小 */
		}
	}

	.uni-list-cell {
		justify-content: flex-start
	}

	.upload-box {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	::v-deep .uni-forms-item {
		.uni-forms-item__label {
			font-weight: 500;
			font-size: 30rpx;
			color: #393F4C;
		}

		.uni-easyinput__content {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-select {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x--border {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x {
			background: transparent !important;
		}
	}

	.button-box {
		// position: absolute;
		// bottom: 0;
		background: #F8F8F8;
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
	}

	::v-deep .input-value-border {
		border: 0;
		border-bottom: 2px solid #E1E5ED !important;
		border-radius: 0;
	}
	.active{
		border: 10rpx solid #FD6801;
		border-radius: 8rpx;
		box-sizing: border-box;
	}
</style>